<style lang="less">
  @import './papers.less';
</style>
<template>
<div>
  <div id="first" v-show="isEditing==1"> 
    <Form :model="searchForm" inline :label-width="80" >
      <FormItem prop="name" :label="$t('name')">
        <Input v-model="searchForm.name" placeholder="请输入查询文字"></Input>
      </FormItem>
      <FormItem prop="intro" :label="$t('intro')">
        <Input v-model="searchForm.intro" placeholder="请输入查询文字"></Input>
      </FormItem>
      <FormItem prop="subjectId" :label="$t('subjectId')">
        <Input v-model="searchForm.subjectId" placeholder="请输入查询文字"></Input>
             <template> 
               <i-select v-model="searchForm.subjectId"  style="width:200px" not-found-text="无课程"> 
               <i-option v-for="item in subjectDatas" clearable :value="item.id" v-bind:key="item.id">
                 {{ item.id +"："+item.name}}
                 </i-option> </i-select> 
                 </template>
      </FormItem>
      <FormItem>
        <Button icon="ios-search" @click="seacherSubmit('seacherForm')">查询</Button>
      </FormItem>
    </Form>
    <ButtonGroup >
      <Button icon="ios-add" @click="btnAddClick">新增</Button>
      <Button icon="ios-create" @click="btnEditClick" :disabled="!currentRow">修改</Button>
      <Button icon="ios-trash" @click="btnDelClick" :disabled="!currentRow">删除</Button>
    </ButtonGroup>
    <Table  border highlight-row ref="currentRowTable" @on-current-change="tableCurrentChange" :columns="columns" :data="datas"></Table> 
     <!--表格 -->
 </div>
  <div id="second" v-show="isEditing==2" >
    <Form :model="searchForm"  >
      <FormItem prop="id" :label="$t('id')" >
        <Input style="width: 100px" readonly="true" v-model="dataForm.id" placeholder="Don't need to enter"></Input>
      </FormItem>
      <FormItem prop="name" :label="$t('name')">
        <Input style="width: 100px" v-model="dataForm.name" placeholder="Enter something..."></Input>
      </FormItem>
       <!--课程   v-model="dataForm.subjectId" -->
      <FormItem prop="subjectId" :label="$t('subjectId')">
             <template> 
              <i-select v-model="dataForm.subjectId"  style="width:200px" not-found-text="无课程"> 
               <i-option v-for="item in subjectDatas" :value="item.id" v-bind:key="item.id">
                 {{ item.id +"："+item.name}}
                 </i-option> 
                 </i-select> 
                 </template>
      </FormItem>
      <FormItem prop="intro2" :label="$t('intro')">
        <Input v-model="dataForm.intro" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="btnSaveClick2">保存</Button>
        <Button style="margin-left: 8px" @click="btnCancelClick2">取消</Button>
        <Button style="margin-left: 8px" @click="btnQuestionClick2">题目管理</Button>
      </FormItem>
    </Form>
  </div>
  <div id="test"  v-show="isEditing==123">
    <Form  :model="dataForm" :label-width="80">
      <!--题目列表  v-model="dataForm.subjectId" -->
       <FormItem prop="questions" :label="$t('questions')">
         <Input v-model="dataForm.questions" placeholder="请输入查询文字">
         </Input>
        <Input  readonly="true" v-model="deleteDatas.length" placeholder="nmsl">
         </Input> <!-- aaaaaaaaaaaaaaaaaaa-->
        <Input  readonly="true" v-model="questionsDatas.length" placeholder="nmsl">
         </Input> <!-- aaaaaaaaaaaaaaaaaaa-->
             <template> 
               <i-select  style="width:200px" not-found-text="无课程"> 
               <i-option v-for="item in questionsDatas" :value="item.id" v-bind:key="item.id"  >
                 {{item.id}}
                 </i-option> 
                 </i-select> 
             </template>
      </FormItem>
      <FormItem prop="questions2" :label="$t('questions2')">
         <Input v-model="dataForm.questions2" placeholder="请输入查询文字">
         </Input>
        <Input  readonly="true" v-model="deleteDatas2.length" placeholder="nmsl">
         </Input> <!-- aaaaaaaaaaaaaaaaaaa-->
        <Input  readonly="true" v-model="questionsDatas2.length" placeholder="nmsl">
         </Input> <!-- aaaaaaaaaaaaaaaaaaa-->
             <template> 
               <i-select  style="width:200px" not-found-text="无课程"> 
               <i-option v-for="item in questionsDatas2" :value="item.id" v-bind:key="item.id"  >
                 {{item.id}}
                 </i-option> 
                 </i-select> 
             </template>
      </FormItem>
    </Form>
  </div>
  <div id="third" v-show="isEditing==3">
   <Form  >
     <ButtonGroup >
        <Button type="primary" @click="btnSaveClick3">保存</Button>
        <Button style="margin-left: 8px" @click="btnCancelClick3">取消</Button>
     </ButtonGroup>
      <br/>
      <br/>
      <FormItem prop="allScores" :label="$t('allScores')">
      <InputNumber :max="1000" :min="0" v-model="dataForm.allScores" ></InputNumber>
      </FormItem>
      <FormItem prop="nowScores" :label="$t('nowScores')">
      <InputNumber :max="1000" :min="0" v-model="nowScores" ></InputNumber>
      </FormItem>
        <template>
                  <RadioGroup v-model="questionType">
                      <Radio label="select">
                          <Icon ></Icon>
                          <span>单选</span>
                      </Radio>
                      <Radio label="select2">
                          <Icon ></Icon>
                          <span>多选</span>
                      </Radio>
                  </RadioGroup>
        </template>
    </Form> 
  </div>
  <div id="select" v-show="isEditing==3&&questionType=='select'">
    <Form v-show="isEditing" >
        <!--列表   v-model="dataForm.subjectId" -->
        <FormItem prop="scores" :label="$t('scores')">
            <InputNumber :max="100" :min="0" v-model="dataForm.scores" ></InputNumber>
        </FormItem>
        <Table  border highlight-row  @on-selection-change="tableQuestionsChange" :columns="questionColumns"  
         :data="questionsDatas"></Table>
            <ButtonGroup >
            <Button icon="ios-add" @click="btnAddClick4" :disabled="!addDatas.length" >增加</Button>
            <Button icon="ios-add" @click="btnDelClick4" :disabled="!deleteDatas.length" >删除</Button>
            </ButtonGroup>
        <Table  border highlight-row  @on-selection-change="tableSelectsChange" :columns="SelectColumns" 
        :data="selectDatas"></Table>
    </Form> 
  </div>
  <div id="select2" v-show="isEditing==3&&questionType=='select2'">
     <Form v-show="isEditing" >
        <!--列表   v-model="dataForm.subjectId" -->
        <FormItem prop="scores2" :label="$t('scores2')">
            <InputNumber :max="100" :min="0" v-model="dataForm.scores2" ></InputNumber>
        </FormItem>
      <Table  border highlight-row  @on-selection-change="tableQuestionsChange" :columns="questionColumns"
      :data="questionsDatas2"></Table>
      <ButtonGroup >
      <Button icon="ios-add" @click="btnAddClick3" :disabled="!addDatas.length" >增加</Button>
      <Button icon="ios-add" @click="btnDelClick3" :disabled="!deleteDatas.length" >删除</Button>
      </ButtonGroup>
      <Table  border highlight-row  @on-selection-change="tableSelectsChange" :columns="SelectColumns" 
      :data="selectDatas2"></Table>
      </Form> 
  </div>
</div>
</template>


<script>
import {getPaperList,getPaper, addPaper, updatePaper, deletePaper } from '@/api/papers'
import {getSubjectList}from '@/api/subjects'
import {getQuestion_selectList}from '@/api/question_selects'
import {getQuestion_select2List}from '@/api/question_select2s'
export default {
  name: 'papers',
  data() {
    return {
      questionType:"select2",
      nowScores:0,
      nowScores1:0,
      nowScores2:0,
      message: 'Hello Vue!',
      currentRow: null,
      selection: [],
      allSelection: [],
      isEditing:1,
      searchForm:
       {     //试卷检索
        id:'',
        name: '',
        intro: '',
        hide:'',
        questions:'',
        subjectId:'',
        grade:'',

      },
      dataForm: {},//选中试卷
      seachSubjectForm: //课程检索
      {
        id:'',
        name: '',
        intro: '',
      },
        columns://表格信息
        [
              {
              type: 'index',
              width: 60,
              align: 'center'
              }, 
            {
              title: this.$t('id'),
              key: 'id'
            }, 
            {
              title: this.$t('name'),
              key: 'name'
            },
            {
            title: this.$t('intro'),
              key: 'intro'
            }, 
            {
              title: this.$t('subjectId'),
              key: 'subjectId'
            }, 
            {
            title: this.$t('hide'),
              key: 'hide'
            }
            , 
            {
            title: this.$t('questions'),
              key: 'questions'
            }
            , 
            {
            title: this.$t('grade'),
              key: 'grade'
            }
        ],
        questionColumns:
        [
              {
            type: 'selection',
              width: 60,
              align: 'center'
              }, 
            {
              title: this.$t('id'),
              key: 'id'
            },
            {
              title: this.$t('info'),
              key: 'info'
            },
            {
              title: this.$t('subjectId'),
              key: 'subjectId'
            },
        ],
        SelectColumns:
        [
              {
            type: 'selection',
              width: 60,
              align: 'center'
              }, 
            {
              title: this.$t('id'),
              key: 'id'
            },
            {
              title: this.$t('info'),
              key: 'info'
            },
            {
              title: this.$t('subjectId'),
              key: 'subjectId'
            },
        ],

      datas: [],//试卷列表
      subjectDatas:[],//课程列表

      questionsDatas:[],//试卷题目列表1
      selectDatas:[],//选择题列表
      
      questionToken:[],//中转站数zu
    
     addDatas:[],
     deleteDatas: [],

     questionsDatas2:[],//试卷题目列表2
     selectDatas2:[],//选择题列表
     addDatas2:[],
     deleteDatas2: [],

      
    }
  },
  created() 
  {
    console.log('created message is: ' + this.message);
    this.queryList();
    this.querySubjectList();
    this.querySelectList();
  
  },
  mounted() 
  {
    console.log('mounted message is: ' + this.message);
  },
  methods: 
  {
  //first
    seacherSubmit: function() //检索
    {
      console.log(this.seacherForm);
      this.queryList();
    },
    queryList: function() //显示搜索试卷结果
    {
      var queryParams = 
      {
        id:this.searchForm.id,
        name: this.searchForm.name,
        intro: this.searchForm.intro,
        hide: this.searchForm.hide,
        grade: this.searchForm.grade,
        subjectId: this.searchForm.grade,
        questions:this.searchForm.questions,
      };
      
      getPaperList(queryParams).then//获取试卷列表
      (res => 
      {
        this.datas = res.data.rows;
       
      }
      );
    },
     querySubjectList: function() //获取课程列表
    {
      var querySubjectParams = {
       // id:this.searchForm.subjectId, 
      };
      getSubjectList(querySubjectParams).then
      (subjectRes =>
       {
        this.subjectDatas= subjectRes.data.rows;
     
      }
      );
    },
   
    tableCurrentChange: function(currentRow, oldCurrentRow) {  //现在选中的行
      this.currentRow = currentRow;
    },
    btnAddClick: function() //添加
    {
      this.dataForm = {};
      this.isEditing = 2;
    },
    btnEditClick: function()//修改界面
    {                                                      
     
      this.querySubjectList();//        课程列表
      this.createPaper();
      this.isEditing = 2;
        },
    createPaper:function()   //创建试卷相关信息                                      //
    {
          this.dataForm = this.currentRow;//选中试卷
          this.createQuestion4();//         题目转数组    单选
          this.querySelectList4();//        全部选择题列表 包含禁选
          this.createQuestion5();//           多选
          this.querySelectList5();//  
          this.nowScores1=this.questionsDatas.length*this.dataForm.scores;
          this.nowScores2=this.questionsDatas2.length*this.dataForm.scores2;  
          this.nowScores= this.nowScores1+this.nowScores2;
    },
    btnDelClick: function()//删除
     {
      this.$Modal.confirm({
        title: '删除',
        content: '确定要删除选中的信息吗?',
        onOk: () => {
          this.delData();
        }
      });
    },
    delData: function() 
    {
      deletePaper(this.currentRow.id).then(res => {
        if (res && res.affectedRows > 0) {
          this.$Message.success('删除成功!');
          this.queryList();
        } else {
          this.$Message.error('删除失败!');
        }
      });
    },
  //
  //second 试卷信息
    btnSaveClick2: function() //页面内保存
    {
      if (this.dataForm.id) {//id为系统生成,没有即为新建
        updatePaper(this.dataForm.id, this.dataForm).then(res => {//更新
          if (res.data && res.data.affectedRows > 0) {
            this.$Message.success('保存成功!');
            this.queryList();
            this.isEditing = 1;
          } else {
            this.$Message.error(res.error);
          }
        });
      } else {
        addPaper(this.dataForm).then(res => {//添加
          if (res.data && res.data.affectedRows > 0) {
            this.$Message.success('保存成功!');
            this.queryList();
            this.isEditing = 1;
          } else {
            this.$Message.error(res.error);
          }
        });
      }
    },
    btnCancelClick2: function()//页面内删除
     {
      this.isEditing = 1;
    },
    btnQuestionClick2:function()
    {
      this.isEditing = 3;
    },
  //
  //third
    btnSaveClick3: function()
     {
      this.isEditing = 2;
    },
    btnCancelClick3: function()
     {
      this.isEditing = 2;
    },
  //
  //select1(4)
    querySelectList4:function() //获得选择题列表
    {
      var queryQuestion_selectParams = 
      {
        subjectId:this.dataForm.subjectId, 
      };
      getQuestion_selectList(queryQuestion_selectParams).then
      (selectRes =>
         {
        this.selectDatas= selectRes.data.rows;
        this.disabled4();//禁选
        //var len=this.selectDatas.length, token=0;
        }
      );
    },
    createQuestion_OLD:function()//字符串转数组
    {
     this.questionsDatas=[];
      this.questionToken=this.dataForm.questions.split(",");
      var j = 0,len=this.questionToken.length;
        while(j < len)
       {
          if
         (!this.questionsDatas[j])
          {        //objArr[Id]未定义或不存在
         this.questionsDatas[j]  = {id:this.questionToken[j]};
          }
         this.questionsDatas[j].id=this.questionToken[j];
         j++;
        }
    },
    createQuestion4:function()//题目内容
    {
     this.questionsDatas=[];
     var exSearchForm={isplural:"id"};
     this.questionToken=this.dataForm.questions.split(",");
      var j = 1,len=this.questionToken.length;
        while(j <=len)
       {
          exSearchForm[""+j+""]=this.questionToken[j-1];
         j++;
        }
         getQuestion_selectList(exSearchForm).then//获取试卷列表
      (res => 
      {
        this.questionsDatas = res.data.rows;
       
      }
      );

    },
    disabled4:function()//禁选
    {
       //this.$set(this.selectDatas[0],'_disabled',true)
       //this.selectDatas[2]=Object.assign({}, this.selectDatas[0], { _disabled:true});
       //this.selectDatas[2]._checked=true;
      var len=this.questionsDatas.length,//试卷包含的试题
          allLen= this.selectDatas.length,//全部试题
          a,b=0;
       while(b < allLen)
       { a=0;
          while(a < len)
          {
           if(this.selectDatas[b].id==this.questionsDatas[a].id)
              {
           this.selectDatas[b]=Object.assign({}, this.selectDatas[b], { _disabled:true});
              }
           a++;
          }
          b++;
        }
    },
    tableQuestionsChange4: function(selection) {//现在选中的行
      this.deleteDatas= selection;//
    },
    tableSelectsChange4: function(selection) {//现在选中的行
      this.addDatas = selection;//
    },
    btnAddClick4: function() //添加题目
    {
       this.$Modal.confirm({
        title: '删除',
        content: '确定要删除选中的信息吗?',
  
        
      });
       this.questionsDatas.push.apply(this.questionsDatas,this.addDatas)
      

    },
    btnDelClick4: function()//删除题目
    {
      len=this.questionsDatas.length, 
      newLen=this.deleteDatas.length, 
      a=0,b=0;
         while(b < Len)
       { a=0;
          while(a <newLen)
          {
           if(this.questionsDatas[b].id==this.deleteDatas[a].id)
              {
           this.questionsDatas.splice(b,1);
              }
           a++;
          }
          b++;
        }
          
     
    },
  //
  //select2(5)
    querySelectList5:function() //获得选择题列表
    {
      var queryQuestion_selectParams = 
      {
        subjectId:this.dataForm.subjectId, 
      };
      getQuestion_select2List(queryQuestion_selectParams).then
      (selectRes =>
         {
        this.selectDatas2= selectRes.data.rows;
        this.disabled5();//禁选
       // var len=this.selectDatas.length, token=0;
        }
      );
    },
     
    createQuestion5:function()//题目内容
    {
     this.questionsDatas2=[];
     var exSearchForm={isplural:"id"};
     var questionToken=this.dataForm.questions2.split(",");
      var j = 1,len=questionToken.length;
        while(j <=len)
       {
          exSearchForm[""+j+""]=questionToken[j-1];
         j++;
        }
         getQuestion_select2List(exSearchForm).then//获取试卷列表
      (res => 
      {
        this.questionsDatas2 = res.data.rows;
      }
      );

    },
    disabled5:function()//禁选
    {
       
      var len=this.questionsDatas2.length,//试卷包含的试题
          allLen= this.selectDatas2.length,//全部试题
          a,b=0;
       while(b < allLen)
       { a=0;
          while(a < len)
          {
           if(this.selectDatas2[b].id==this.questionsDatas2[a].id)
              {
           this.selectDatas2[b]=Object.assign({}, this.selectDatas2[b], { _disabled:true});
              }
           a++;
          }
          b++;
        }
    },
    tableQuestionsChange5: function(selection) {//现在选中的行
      this.deleteDatas2= selection;//
    },
    tableSelectsChange5: function(selection) {//现在选中的行
      this.addDatas2 = selection;//
    },
    btnAddClick5: function() //添加题目
    {
       this.$Modal.confirm({
        title: '删除',
        content: '确定要删除选中的信息吗?',
  
        
      });
       this.questionsDatas2.push.apply(this.questionsDatas2,this.addDatas2)
      

    },
    btnDelClick5: function()//删除题目
    {
      len=this.questionsDatas2.length, 
      newLen=this.deleteDatas2.length, 
      a=0,b=0;
         while(b < Len)
       { a=0;
          while(a <newLen)
          {
           if(this.questionsDatas2[b].id==this.deleteDatas2[a].id)
              {
           this.questionsDatas2.splice(b,1);
              }
           a++;
          }
          b++;
        }
          
     
    },
  }
}

</script>